import React from "react";
import FallSwingSnow from "./FallSwingSnow";
import {ART, Dimensions, ImageBackground, Image, TouchableOpacity, Animated, Easing} from "react-native";
import Tree from "./Tree";
import {px} from "../utils/ScreenUtil";
import SwingEnergy from './SwingEnergy'

const {Surface, Shape, Path, ClippingRectangle, Pattern, LinearGradient, RadialGradient, Group, Text} = ART;


const {width, height} = Dimensions.get('window');




export default class Forest extends React.Component {

  static navigationOptions = ({ navigation }) => ({
    title: `模仿蚂蚁森林`,
  });

  height = width + 100;



  render() {
    return (
      <ImageBackground
        resizeMode={'stretch'}
        source={require('./forest.jpeg')}
        style={{height: px(1200), width}}>
        <Surface
          opacity={0}
          width={width}
          height={this.height}
          style={{position:'absolute',backgroundColor: '#00000000'}}>
          {this._renderSonw(30)}
        </Surface>
        <SwingEnergy width={width} height={px(1200)}/>
        <Tree/>
      </ImageBackground>
    )
  }

  _randomize = max => Math.random() * max;

  _renderSonw = (count) => {
    return Array.from({
      length: count,
    })
      .map(i => {
        return {
          x: this._randomize(width),
        }
      })
      .map((snow, index) => {
        return (
          <FallSwingSnow
            key={index}
            height={this.height}
            center={{x: snow.x, y: 0}}
            r={4}
            amplitude={30} //左右摆动幅度
            delay={this._randomize(10000)}
          />

        )
      })
  }
}
